<template>
  <div style="height:100vh;position:relative;">
    <div class="notFound">
      <img src="../assets/images/404.png" alt="404 Not Found">
    </div>
    
  </div>
</template>

<script>
export default {
  data(){
    return{
      notFound: require('@/assets/images/404.png')
    }
  },
  mounted(){
    console.log(this.notFound)
  }
};
</script>

<style scoped>
.notFound{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 600px;
  border: 5px solid #333;
  border-radius: 50%;
  /* box-shadow: 0 0 20px rgb(31, 31, 31); */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: breath linear 14s infinite;
}
.notFound img{
  width: 450px;
  height: 450px;
  display: inline-block;
  vertical-align: middle;
}
@keyframes breath {
  0%{box-shadow: 0 0 0px rgb(255, 0, 0);}
  10%{box-shadow: 0 0 30px rgb(255, 0, 0);}
  20%{box-shadow: 0 0 0px rgb(255, 0, 0);}
  30%{box-shadow: 0 0 30px rgb(255, 187, 0);}
  40%{box-shadow: 0 0 0px rgb(255, 187, 0);}
  50%{box-shadow: 0 0 30px rgb(57, 255, 2);}
  60%{box-shadow: 0 0 0px rgb(57, 255, 2);}
  70%{box-shadow: 0 0 30px rgb(2, 183, 255);}
  80%{box-shadow: 0 0 0px rgb(2, 183, 255);}
  90%{box-shadow: 0 0 30px rgb(225, 0, 255);}
  100%{box-shadow: 0 0 0px  rgb(225, 0, 255);}
}
</style>
